<template>
  <div class="setting">
    <template v-if="tabType == 'data'">
      <div class="card">
        <div class="title">分类设置</div>
        <div class="content">
          <el-form-item label="分类ID">
            <div class="sa-flex">
              <el-input v-model="settingData.data.id" type="number" placeholder="请选择或输入分类" @change="setCategory"/>
			  <el-button class="sa-m-l-10" type="primary" @click="openCategory">选择分类</el-button>
            </div>
          </el-form-item>
        </div>
		<div class="title">选中样式</div>
        <div class="content">
          <el-form-item label="字体颜色">
            <dc-color-picker v-model="settingData.data.activeStyle.color" />
          </el-form-item>
		  <el-form-item label="字体大小">
            <dc-slider v-model="settingData.data.activeStyle.size" />
          </el-form-item>
        </div>
		<div class="title">默认样式</div>
        <div class="content">
          <el-form-item label="字体颜色">
            <dc-color-picker v-model="settingData.data.inactiveStyle.color" />
          </el-form-item>
		  <el-form-item label="字体大小">
            <dc-slider v-model="settingData.data.inactiveStyle.size" />
          </el-form-item>
        </div>
		<div class="title">下划线设置</div>
        <div class="content">
          <el-form-item label="下划线颜色">
            <dc-color-picker v-model="settingData.data.line.color" />
          </el-form-item>
        </div>
		<div class="title">组件设置</div>
        <div class="content">
		  <el-form-item label="组件高度">
            <dc-slider v-model="settingData.data.height" />
          </el-form-item>
        </div>
      </div>
    </template>
  </div>
</template>

<script setup>
  import dcUrl from '../../common/dc-url.vue';
  import dcColorPicker from '../../common/dc-color-picker.vue';
  import CategorySelect from '@/app/shop/admin/category/select.vue';
  import dcSlider from '../../common/dc-slider.vue';
	import {api as categoryApi} from '@/app/shop/admin/category/category.service';

  import { useModal } from '@/sheep/hooks';

  const props = defineProps(['settingData', 'tabType']);

function openCategory(){
	useModal(
		CategorySelect,
		{
			title: '选择',
			from: 'page-category',
		},
		{
		confirm: (res) => {
			props.settingData.data.id = (res.data.list.length > 0 ? res.data.list[0]?.id : '');
			setCategory()
		},
		},
	);
}
async function setCategory(){
	const { error, data } = await categoryApi.detail(props.settingData.data.id)
	if(error === 0){
		props.settingData.data.list = data.categories
	}
}

</script>
